<template>
  <section class="component user-list">
    <data-box :data="userList" @onPageChange="refreshUserData" :page="pageService" ref="data-box">
      <template slot="columns">
        <el-table-column prop="userName" label="用户名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="realName" label="用户姓名" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="department.deptName" label="所属机构" :min-width="$helper.getColumnWidth(4)" show-overflow-tooltip>
        </el-table-column>
      </template>
    </data-box>
  </section>
</template>

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import { Dependencies } from '~/core/decorator'
import { Prop } from 'vue-property-decorator'
import DataBox from '~/components/common/data-box.vue'
import { RoleService } from '~/service/service-manage/role.service'
import { PageService } from '~/util/page.service'

@Component({
  components: {
    DataBox
  }
})
export default class UserList extends Vue {
  @Dependencies(RoleService)
  private roleService: RoleService
  @Dependencies(PageService)
  private pageService: PageService

  @Prop({
    type: String,
    required: true
  }) roleId: string

  // 用户列表
  private userList: Array<any> = [];

  private refreshUserData() {
    this.roleService.queryUserListByRoleId(this.roleId, this.pageService).subscribe(
      data => this.userList = data,
      ({ msg }) => this.$message.error(msg)
    )
  }
}
</script>

